<template>
	<view>
		<navigation-bar :back="true"
			:title="forumType == '1' ? '热游圈子' : forumType == '2' ? '新游圈子' : forumType == '3' ? '好游圈子' : '吐槽圈子'"></navigation-bar>
		<view class="b1">
			<view class="push4">
				<view class="push5">圈内热门话题</view>
			</view>
			<view class="push11">
				<view :class="typeIndex == '1' ? 'push13' : 'push12'" @tap="changeType" data-data="1">坤了个坤</view>
				<view :class="typeIndex == '2' ? 'push13' : 'push12'" @tap="changeType" data-data="2">唱跳rap</view>
				<view :class="typeIndex == '3' ? 'push13' : 'push12'" @tap="changeType" data-data="3">剑侠传奇</view>
				<!-- <view class="{{typeIndex=='4'?'push13':'push12'}}" bind:tap="changeType" data-data="4">Overwatch</view> -->
			</view>
			<view class="b2">
				<view :class="benefitIndex == 0 ? 'b3' : 'b4'" @tap="changeTag" :data-data="0">全部</view>
				<view :class="benefitIndex == 1 ? 'b3' : 'b4'" @tap="changeTag" :data-data="1">最新</view>
				<view :class="benefitIndex == 2 ? 'b3' : 'b4'" @tap="changeTag" :data-data="2">最热</view>
				<view :class="benefitIndex == 3 ? 'b3' : 'b4'" @tap="changeTag" :data-data="3">有图</view>
				<view :class="benefitIndex == 4 ? 'b3' : 'b4'" @tap="changeTag" :data-data="4">长文</view>
			</view>

			<view @tap="goToForumDetail" :data-data="item" v-for="(item, index) in forumData" :key="index">
				<view class="qz1">
					<view class="qz2">
						<view class="qz3">
							<view class="qz4">
								<image class="qz5" :src="item.head"></image>
							</view>
							<view class="qz6">
								<view class="qz7">{{ item.name }}</view>
								<view class="qz8">
									<view class="qz9">{{ item.createTime }}</view>
								</view>
							</view>
						</view>
						<view class="qz11">
							<image src="/static/images/qz1.png"></image>
						</view>
					</view>
					<view class="qz12">{{ item.title }}</view>
					<view class="qz13">{{ item.content }}</view>
					<view class="qz14" v-if="item.image && item.image.length > 0">
						<view class="qz15" v-for="(urls, index1) in item.image" :key="index1">
							<image :src="urls" mode="aspectFill"></image>
						</view>
					</view>
					<view class="qz16">
						<view class="qz17">{{ item.gamename }}</view>
						<view class="qz18" v-if="item.tag1">#{{ item.tag1 }}</view>
						<view class="qz18" v-if="item.tag2">#{{ item.tag2 }}</view>
						<view class="qz18" v-if="item.tag3">#{{ item.tag3 }}</view>
					</view>
					<view class="qz19">
						<view class="qz20">
							<image src="/static/images/qz4.png" class="qz22"></image>
							<view class="qz23">{{ item.num1 }}</view>
						</view>
						<view class="qz21">
							<view class="qz20">
								<image src="/static/images/report.png" class="report" @click.stop="openreport(item)"></image>
							</view>
							<view class="qz20">
								<image src="/static/images/qz2.png" class="qz22"></image>
								<view class="qz23">{{ item.num2 }}</view>
							</view>
							<view class="qz20" style="margin-left: 40rpx">
								<image src="/static/images/qz3.png" class="qz22"></image>
								<view class="qz23">{{ item.num3 }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view
				style="margin-top: 30rpx; text-align: center; color: var(--GColor); display: flex; align-items: center">
				<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
				<view style="padding: 0 15rpx">没有更多了</view>
				<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
			</view>
			<view style="height: 50rpx; margin-top: 50rpx"></view>
		</view>
		<CustomConfirm :visible.sync="showLoginConfirm" title="温馨提示" content="亲，您还没登录，请先登录~"
			@confirm="handleLoginConfirm" @cancel="handleLoginCancel" />
		<report v-if="reportstore.showreport"/>
	</view>
</template>

<script>
	import loginStatusUtils from '../../utils/loginStatusUtils';
	import CustomConfirm from '../../components/CustomConfirm/CustomConfirm.vue';
	import report from '../../components/report/report.vue'
	import storereport from '../../store/report.js'
	import {
		getForum,
		addForumViewAdd
	} from '../../api/getApi';
	export default {
		data() {
			return {
				benefitIndex: 0,
				typeIndex: '1',
				forumType: '1',
				forumData: [],
				urls: [],
				reportstore:storereport,
				showLoginConfirm: false, //登录提示框是否显示
			};
		},
		onLoad(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let forumType = uni.getStorageSync('forumType');
			if (!forumType) {
				forumType = '1';
			} else {
				forumType = forumType;
			}
			console.log(forumType);
			this.setData({
				forumType: forumType
			});
			this.getData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			//登录提示框确认事件
			handleLoginConfirm() {
				uni.navigateTo({
					// 跳进登录页面
					url: '/pages/login/login'
				});
			},
			//登录提示框取消事件
			handleLoginCancel() {
				this.showLoginConfirm = false;
			},
			openreport(item){
				if (!loginStatusUtils.checkLoginAndShowConfirm(this)) {
					return;
				}
				// console.log(item);
				this.reportstore.reportitem=item;
				this.reportstore.setreporttype("帖子");
				this.reportstore.show();
			},
			changeTag(e) {
				let index = e.currentTarget.dataset.data;
				this.setData({
					benefitIndex: index
				});
				this.getData();
			},

			changeType(event) {
				this.setData({
					typeIndex: event.target.dataset.data
				});
			},

			getData() {
				this.setData({
					forumData: []
				});
				getForum({
					page: 1,
					limit: 99,
					type: this.forumType,
					isCurrent: this.benefitIndex == '1' ? 'true' : 'false',
					isHot: this.benefitIndex == '2' ? 'true' : 'false',
					hasImage: this.benefitIndex == '3' ? 'true' : 'false',
					nullImage: this.benefitIndex == '4' ? 'true' : 'false'
				}).then((res) => {
					console.log(res);
					res.data.list.forEach((element) => {
						if (element.image) {
							element.image = element.image.split(',');
						}
					});
					this.setData({
						forumData: res.data.list
					});
				});
			},

			goToForumDetail(e) {
				let data = e.currentTarget.dataset.data;
				uni.setStorageSync('forumDetail', JSON.stringify(data));
				// 帖子浏览量+1
				addForumViewAdd(data.id);
				uni.navigateTo({
					url: '/pages/forumDetail/forumDetail'
				});
			}
		},
		components(){
			report
		}
	};
</script>
<style>
	.b1 {
		padding: 40rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
		padding-top: 0rpx;
		overflow: auto;
	}

	.b2 {
		display: flex;
		word-break: keep-all;
		overflow-y: auto;
		border-bottom: 3rpx solid #e0e0e0;
		margin-bottom: 25rpx;
		min-height: 70rpx;
	}

	.b3 {
		margin-right: 48rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx;
		padding: 5rpx 0rpx;
		border-radius: 150rpx 50rpx 30rpx 30rpx;
		font-size: 30rpx;
		color: var(--Color);
		font-weight: 600;
		margin-bottom: 20rpx;
		border-bottom: 4rpx solid var(--Color);
	}

	.b4 {
		margin-right: 48rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx;
		padding: 5rpx 0rpx;
		border-radius: 100rpx;
		font-size: 30rpx;
		color: var(--GColor);
		margin-bottom: 20rpx;
	}

	.push4 {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.push5 {
		font-weight: bold;
		font-size: 30rpx;
	}

	.push11 {
		display: flex;
		align-items: center;
	}

	.push12 {
		background: #ededed;
		border-radius: 10rpx;
		width: max-content;
		padding: 13rpx 28rpx;
		color: black;
		font-size: 24rpx;
		margin: 0 18rpx 18rpx 0;
	}

	.push13 {
		border-radius: 10rpx;
		width: max-content;
		padding: 11rpx 26rpx;
		font-size: 24rpx;
		margin: 0 18rpx 18rpx 0;
		border: 2rpx solid var(--LColor50);
		color: var(--Color);
		background: var(--LColor20);
	}

	.qz1 {
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		border-radius: 25rpx;
		background: white;
		margin-bottom: 30rpx;
	}

	.qz2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.qz3 {
		display: flex;
		flex: 1;
	}

	.qz4 {
		width: 85rpx;
		height: 85rpx;
		border-radius: 100%;
	}

	.qz5 {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.qz6 {
		display: flex;
		flex-direction: column;
		margin-left: 25rpx;
		justify-content: space-around;
	}

	.qz7 {
		font-weight: blod;
		font-size: 30rpx;
	}

	.qz8 {
		display: flex;
		font-size: 24rpx;
		color: gray;
	}

	.qz9 {
		margin-right: 5rpx;
	}

	.qz10 {
		margin-left: 30rpx;
	}

	.qz11 {
		width: 40rpx;
		height: 40rpx;
	}

	.qz11>image {
		width: 100%;
		height: 100%;
	}

	.qz12 {
		font-size: 32rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 20rpx 0;
	}

	.qz13 {
		font-size: 27rpx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 15rpx;
	}

	.qz14 {
		display: flex;
		gap: 20rpx;
		padding: 10rpx 0;
		flex-wrap: wrap;
	}

	.qz15 {
		width: 190rpx;
		height: 190rpx;
		object-fit: cover;
		border-radius: 15rpx;
		background: #f5f5f5;
	}

	.qz15>image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.qz16 {
		display: flex;
		align-items: center;
		margin-top: 25rpx;
		flex-wrap: wrap;
	}

	.qz17 {
		color: gray;
		font-size: 25rpx;
	}

	.qz18 {
		margin-left: 25rpx;
		font-size: 23rpx;
		border: 2rpx solid var(--LColor50);
		padding: 7rpx 15rpx;
		border-radius: 30rpx;
		color: var(--Color);
		background: var(--LColor20);
	}

	.qz19 {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 5rpx;
	}

	.qz20 {
		display: flex;
		align-items: flex-end;
	}

	.qz21 {
		display: flex;
	}

	.qz22 {
		width: 30rpx;
		height: 30rpx;
	}
	.report{
		width: 25rpx;
		height: 25rpx;
		transform: translateY(-10%) translateX(-200%);
	}

	.qz23 {
		color: gray;
		font-size: 25rpx;
		margin-left: 15rpx;
	}
</style>